<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
  <title>主页</title>
</head>
<body>
<%
  String username = (String) session.getAttribute("adminName");
%>
<h3 style="text-align: center; margin-top: 20px">欢迎您&nbsp;&nbsp;<%=username%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="btn btn-danger" id="logout">退出</button>
</h3>
<div class="container" style="margin-top: 100px">
  <div class="row" style="margin-bottom: 20px">
    <div class="col-md-8">
      <button class="btn btn-primary" style="outline: none;box-shadow: none" id="addStudent">添加</button>&nbsp;&nbsp;
      <button class="btn btn-danger" style="outline: none;box-shadow: none" id="deleteStudent">删除</button>&nbsp;&nbsp;
      <button class="btn btn-success" style="outline: none;box-shadow: none" id="refreshBtn">刷新</button>
      <button class="btn btn-info" style="outline: none;box-shadow: none; margin-left: 50px" id="seekTeachers">教师信息</button>
      <button class="btn btn-warning" style="outline: none; box-shadow: none; margin-left: 20px" id="alreadyDelete">查看最近删除的学生</button>
    </div>
<%--    <div class="col-md-4 col-md-offset-6">--%>
<%--    </div>--%>
    <div class="col-md-4">
      <div class="input-group">
        <input id="keyWords" name="keyWords" type="text" class="form-control" placeholder="关键词">
        <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" style="outline: none;box-shadow: none" id="searchBtn">搜索</button>
                </span>
      </div>
    </div>
  </div>
  <div>
    <table class="table table-striped" id="student_table">
      <thead>
      <tr style="text-align: center">
        <th>
          <input type="checkbox" id="check_all">
        </th>
        <th scope="col">学号</th>
        <th scope="col">中文名</th>
        <th scope="col">英文名</th>
        <th scope="col">电话号码</th>
        <th scope="col">班级</th>
        <th scope="col">学期</th>
        <th scope="col">期中成绩</th>
        <th scope="col">期末成绩</th>
        <th scope="col">在籍状态</th>
        <th scope="col">操作</th>
      </tr>
      </thead>
      <tbody id="tbody" style="text-align: center"></tbody>
    </table>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="editStudentModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="editStudentForm">
          <div class="form-group">
            <label>学号</label>
            <input readonly="readonly" name="studentId" type="text" class="form-control" id="editStudentId">
          </div>
          <div class="form-group">
            <label>中文名</label>
            <input name="chName" type="text" class="form-control" id="editChName">
          </div>
          <div class="form-group">
            <label>英文名</label>
            <input name="enName" type="text" class="form-control" id="editEnName">
          </div>
          <div class="form-group">
            <label>电话号码</label>
            <input name="tel" type="text" class="form-control" id="editTel">
          </div>
          <div class="form-group">
            <label>班级</label>
            <input name="stuClass" type="text" class="form-control" id="editStuClass">
          </div>
          <div class="form-group">
            <label>学期</label>
            <input name="semester" type="text" class="form-control" id="editSemester">
          </div>
          <div class="form-group">
            <label>期中成绩</label>
            <input name="midMarks" type="text" class="form-control" id="editMidMarks">
          </div>
          <div class="form-group">
            <label>期末成绩</label>
            <input name="endMarks" type="text" class="form-control" id="editEndMarks">
          </div>
          <div class="form-group">
            <label>在籍状态</label>
            <input name="status" type="text" class="form-control" id="editStatus">
          </div>
          <div class="form-group">
            <label>密码</label>
            <input name="password" type="text" class="form-control" id="editPassword">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="saveEditStudent">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="addStudentModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="addStudentForm">
          <div class="form-group">
            <label>学号</label>
            <input required name="studentId" type="text" class="form-control" id="addStudentId">
          </div>
          <div class="form-group">
            <label>中文名</label>
            <input required name="chName" type="text" class="form-control" id="addChName">
          </div>
          <div class="form-group">
            <label>英文名</label>
            <input required name="enName" type="text" class="form-control" id="addEnName">
          </div>
          <div class="form-group">
            <label>电话号码</label>
            <input required name="tel" type="text" class="form-control" id="addTel">
          </div>
          <div class="form-group">
            <label>班级</label>
            <input required name="stuClass" type="text" class="form-control" id="addStuClass">
          </div>
          <div class="form-group">
            <label>学期（1-8）</label>
            <input required name="semester" type="text" class="form-control" id="addSemester">
          </div>
          <div class="form-group">
            <label>期中成绩</label>
            <input name="midMarks" type="text" class="form-control" id="addMidMarks">
          </div>
          <div class="form-group">
            <label>期末成绩</label>
            <input name="endMarks" type="text" class="form-control" id="addEndMarks">
          </div>
          <div class="form-group">
            <label>初始密码</label>
            <input required name="password" type="text" class="form-control" id="addPassword">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="addStudentBtn">添加</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="deleteAllModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <table class="table table-striped" id="delete_table">
          <thead>
          <tr style="text-align: center">
            <th scope="col">学号</th>
            <th scope="col">中文名</th>
            <th scope="col">英文名</th>
            <th scope="col">电话号码</th>
            <th scope="col">班级</th>
          </tr>
          </thead>
          <tbody id="deleteBody" style="text-align: center"></tbody>
        </table>
        <ul class="list-group list-group-flush" id="delete_li">
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="clearAllDeleted">清空</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>

<script>

  $(function (){
    getStudentList()
  })

  $("#refreshBtn").click(function (){
    getStudentList()
  })

  // 获取学生列表
  function getStudentList(){
    $.ajax({
      url: "${APP_PATH}/getStudentList",
      type: "GET",
      success: function (res){
        console.log(res)

        //测试学生列表
        bulidStudentTable(res.data.studentList)
      }
    })
  }

  function bulidStudentTable(res){
    $("#student_table tbody").empty()
    $("#tbody").empty()
    var info = res
    $.each(res, function (index, item){
      var checkBox = $("<td><input type='checkbox' class='check_item' /></td>")
      var studentIdtd = $("<td></td>").append(item.studentId)
      var chName = $("<td></td>").append(item.chName)
      var enName = $("<td></td>").append(item.enName)
      var tel = $("<td></td>").append(item.tel)
      var stuClass = $("<td></td>").append(item.stuClass)
      var semester = $("<td></td>").append(item.semester)
      var midMarks = $("<td></td>").append(item.midMarks)
      var endMarks = $("<td></td>").append(item.endMarks)
      var status = $("<td></td>").append(item.status)

      var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
              .append($("<span></span>").addClass("bi bi-pencil-square"))
      editBtn.attr("edit_id",item.studentId)
      var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
              .append($("<span></span>").addClass("bi bi-trash-fill"))
      delBtn.attr("del_id",item.studentId)
      var btntd = $("<td></td>").append(editBtn).append("  ").append(delBtn)
      $("<tr></tr>").append(checkBox).append(studentIdtd).append(chName).append(enName).append(tel).
      append(stuClass).append(semester).append(midMarks).append(endMarks).append(status).append(btntd).appendTo("#student_table tbody")
    })
  }


  //编辑查看
  $(document).on("click",".edit_btn",function (){
    console.log($(this).attr("edit_id"))
    // diaryId = $(this).attr("edit_id")
    // getDiaryById($(this).attr("edit_id"))
    getStudentById($(this).attr("edit_id"))
    $("#editStudentModal").modal('show')
  })

  // 将表单渲染到编辑模态框
  function getStudentById(studentId){
    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": studentId},
      method: "GET",
      success: function (res){
        // console.log(res)
        console.log(res)
        $("#editStudentId").val(res.data.data.studentId)
        $("#editChName").val(res.data.data.chName)
        $("#editEnName").val(res.data.data.enName)
        $("#editTel").val(res.data.data.tel)
        $("#editStuClass").val(res.data.data.stuClass)
        $("#editSemester").val(res.data.data.semester)
        $("#editMidMarks").val(res.data.data.midMarks)
        $("#editEndMarks").val(res.data.data.endMarks)
        $("#editStatus").val(res.data.data.status)
        $("#editPassword").val(res.data.data.password)
      }
    })
  }

  // 保存编辑的信息
  $("#saveEditStudent").click(function (){

    $.ajax({
      url: "${APP_PATH}/saveEditStudent",
      data: $(".editStudentForm").serialize(),
      method: "POST",
      success: function (res){
        console.log(res)
        if(res.code === 200){
          alert("修改成功")
          $("#editStudentModal").modal('hide')
          getStudentList()
        }
      }
    })
  })


  // 添加学生信息
  $("#addStudent").click(function (){
    $("#addStudentModal").modal('show')
  })
  $("#addStudentBtn").click(function (){

    if($("#addStudentId").val().length > 10){
      alert("学号长度不能超过10位")
      return
    }

    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": $("#addStudentId").val() },
      method: "POST",
      success: function (res){
        if(res.code === 200){
          alert("该账号已存在")
        }else if(res.code === 202){
          $.ajax({
            url: "${APP_PATH}/addStudent",
            method: "POST",
            data: $(".addStudentForm").serialize(),
            success: function (res){
              console.log(res)
              if(res.code === 200){
                alert("添加成功")
                $("#addStudentModal").modal('hide')
                getStudentList()
                $(".addStudentForm input").each(function (){
                  $(this).val("")
                })
              }
            }
          })
        }
      }
    })

  })

  // 删除一个
  $(document).on('click', ".del_btn", function (){
    var name = $(this).parents("tr").find("td:eq(2)").text()
    var studentId = $(this).attr("del_id")
    if(confirm("确认删除【"+name+"】吗？")){
      $.ajax({
        url: "${APP_PATH}/delStudentById",
        data: {"studentId": studentId},
        method: "POST",
        success: function (res){
          if(res.code === 200){
              alert("删除成功")
              getStudentList()
          }
        }
      })
    }
  })

  // 批量删除

  // 全选
  $("#check_all").click(function (){
    $(".check_item").prop("checked", $(this).prop("checked"))
  })

  // 多选
  $(document).on('click', ".check_item", function (){
    //判断当前选中的是否时整个页面数据个数
    var flag = $(".check_item:checked").length == $(".check_item").length
    $("#check_all").prop("checked", flag)
  })

  // 批量删除
  $("#deleteStudent").click(function (){
    var del_ids = ""
    //获取要删除的id
    $.each($(".check_item:checked"), function (){
      del_ids += $(this).parents("tr").find("td:eq(1)").text()+"-"
    })
    del_ids = del_ids.substring(0, del_ids.length-1)
    if(confirm("确认删除所选的学生吗？")){
      $.ajax({
        url: "${APP_PATH}/delStudentByIds",
        method: "POST",
        data: {"ids": del_ids},
        success: function (res){
          if(res.code === 200){
            alert("删除成功")
            getStudentList()
          }
        }
      })
    }
  })

  // 模糊查询
  $("#searchBtn").click(function (){
    var keyWords = $("#keyWords").val()
    if("" === keyWords){
      return false
    }
    $.ajax({
      url: "${APP_PATH}/findStudent",
      method: "POST",
      data: {"keyWords": keyWords},
      success: function (res){
        if(res.code === 200){
          console.log(res)
        }
      }
    })
  })


  $("#logout").click(function (){
    window.location.href = "${APP_PATH}/login.jsp"
  })

  $("#seekTeachers").click(function (){
    window.location.href = "${APP_PATH}/jsp/admin/seekTeachers.jsp"
  })

  $("#alreadyDelete").click(function (){
    $("#deleteAllModal").modal('show')
    getStudentBeDeleted()
  })

  function getStudentBeDeleted(){
    $.ajax({
      url: "${APP_PATH}/getStudentsBeDeleted",
      method: "GET",
      success: function (res){
        $.each(res.data.list, function (index, item){
          $("#delete_li").append($("<li value='"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                  +item.studentId+"'>"
                  +item.studentId+
                  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                  +item.chName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                  + item.enName+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                  +item.tel +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                  + item.stuClass+ "</li>"))
        })
      }
    })
  }

  $("#clearAllDeleted").click(function (){
    $.ajax({
      url: "${APP_PATH}/clearAllDeleted",
      method: "POST",
      success: function (res){
        if(res.code === 200){
          alert("已清空")
          getStudentBeDeleted()
          $("#deleteAllModal").modal('hide')
          $("#delete_li").empty()
        }else if(data.code === 202){
          alert("已清空")
          getStudentBeDeleted()
          $("#deleteAllModal").modal('hide')
          $("#delete_li").empty()
        }
      }
    })
  })

  $("#deleteAllModal").on('hide.bs.modal', function (){
    $("#delete_li").empty()
  })


</script>

<style>
  ul{
    font-weight: bold;
    font-size: 15px;
  }
</style>
